<template>
  <div data-test="toast" class="toast" v-if="toast.show">
    {{ toast.message }}
  </div>
</template>
<script>
import { reactive } from 'vue'

export default {
  name: 'Toast',
  props: {
    toast: {
      show: false,
      message: ''
    }
  }
}
export const userToastEffect = () => {
  const toast = reactive({
    show: false,
    message: ''
  })

  const showToast = message => {
    toast.show = true
    toast.message = message
    setTimeout(() => {
      toast.show = false
      toast.message = ''
    }, 3000)
  }
  return {
    toast,
    showToast
  }
}
</script>
